<template>
  <div class="vue-admin-beautiful-wrapper" :class="classObj">
    <div
      v-if="'horizontal' === layout"
      class="layout-container-horizontal"
      :class="{
        fixed: header === 'fixed',
        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
      }"
    >
      <div :class="header === 'fixed' ? 'fixed-header' : ''">
        <vab-top-bar />
        <div
          v-if="tabsBar === 'true' || tabsBar === true"
          :class="{ 'tag-view-show': tabsBar }"
        >
          <div class="vab-main">
            <vab-tabs-bar />
          </div>
        </div>
      </div>
      <div class="vab-main main-padding">
        <vab-ad />
        <vab-app-main />
      </div>
    </div>
    <div
      v-else
      class="layout-container-vertical"
      :class="{
        fixed: header === 'fixed',
        'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
      }"
    >
      <div
        v-if="device === 'mobile' && collapse === false"
        class="mask"
        @click="handleFoldSideBar"
      ></div>
      <vab-side-bar />
      <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
        <div :class="header === 'fixed' ? 'fixed-header' : ''">
          <vab-nav-bar />
          <vab-tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />
        </div>
        <vab-ad />
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="never">
            <div class="table-container" style="width: 95%; margin: 0 auto">
              <h2>
                排程状态展示
                <!--                <el-date-picker-->
                <!--                  v-model="timePicker"-->
                <!--                  class="datePicker"-->
                <!--                  type="date"-->
                <!--                  value-format="yyyy-MM-dd"-->
                <!--                  :default-value="new Date().setFullYear(2020)"-->
                <!--                  placeholder="起始日期"-->
                <!--                ></el-date-picker>-->
              </h2>
              <div id="gantt" style="height: 1000px"></div>
            </div>
          </el-card>
        </el-col>
        <vab-app-main />
      </div>
    </div>
    <el-backtop />
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import { tokenName } from '@/config'
  import { getAllOrders, getNewOrders } from '../../api/order/getAllOrders'
  import { getCookie } from '../../utils/cookie'
  import * as echarts from 'echarts'
  export default {
    name: 'Scheduler',
    components: {},
    filters: {
      statusFilter(status) {
        const statusMap = {
          已完成: 'success',
          正在作业: 'gray',
          延期: 'danger',
          未开始: 'warning',
        }
        return statusMap[status]
      },
    },
    data() {
      return {
        imgShow: true,
        schedulerList: [
          {
            resourceId: 1,
            productId: 11,
            productNum: 111,
            deadline: '2020-07-01',
            status: '开始',
          },
        ],
        newOrderList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        timePicker: '',
      }
    },
    computed: {
      ...mapGetters({
        layout: 'settings/layout',
        tabsBar: 'settings/tabsBar',
        collapse: 'settings/collapse',
        header: 'settings/header',
        device: 'settings/device',
      }),
      classObj() {
        return {
          mobile: this.device === 'mobile',
        }
      },
      height() {
        return this.$baseTableHeight()
      },
    },
    watch: {
      timePicker() {
        document.cookie = 'cur_date=' + this.timePicker
      },
    },
    created() {
      this.fetchData()
      this.getCookie()
    },
    beforeMount() {
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
    },
    mounted() {
      this.drawGantt()

      this.oldLayout = this.layout
      const userAgent = navigator.userAgent
      if (userAgent.includes('Juejin')) {
        this.$baseAlert(
          'vue-admin-beautiful不支持在掘金内置浏览器演示，请手动复制以下地址到浏览器中查看http://mpfhrd48.sanxing.uz7.cn/vue-admin-beautiful'
        )
      }
      const isMobile = this.handleIsMobile()
      if (isMobile) {
        if (isMobile) {
          //横向布局时如果是手机端访问那么改成纵向版
          this.$store.dispatch('settings/changeLayout', 'vertical')
        } else {
          this.$store.dispatch('settings/changeLayout', this.oldLayout)
        }
        this.$store.dispatch('settings/toggleDevice', 'mobile')
        setTimeout(() => {
          this.$store.dispatch('settings/foldSideBar')
        }, 2000)
      } else {
        this.$store.dispatch('settings/openSideBar')
      }
      this.$nextTick(() => {
        window.addEventListener(
          'storage',
          (e) => {
            if (e.key === tokenName || e.key === null) window.location.reload()
            if (e.key === tokenName && e.value === null)
              window.location.reload()
          },
          false
        )
      })
    },
    methods: {
      ...mapActions({
        handleFoldSideBar: 'settings/foldSideBar',
      }),
      handleIsMobile() {
        return document.body.getBoundingClientRect().width - 1 < 992
      },
      handleResize() {
        if (!document.hidden) {
          const isMobile = this.handleIsMobile()
          if (isMobile) {
            //横向布局时如果是手机端访问那么改成纵向版
            this.$store.dispatch('settings/changeLayout', 'vertical')
          } else {
            this.$store.dispatch('settings/changeLayout', this.oldLayout)
          }

          this.$store.dispatch(
            'settings/toggleDevice',
            isMobile ? 'mobile' : 'desktop'
          )
        }
      },
      drawGantt() {
        let data = []
        let resources = [
          '26组- 杨  丽(5)',
          '27组-徐贤燕(5)',
          '33组-许丽萍(5)',
          '36组-谢春霞(4)',
          '31组-史义玲(4)',
          '40组-高海燕(5)',
        ]

        let typeItem = { name: '418351', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        console.log(typeItem.name + typeItem.color)
        data.push({
          name: typeItem.name,
          value: [0, 6, 7],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764374', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        console.log(typeItem.name + typeItem.color)
        data.push({
          name: typeItem.name,
          value: [0, 48, 49],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [0, 108, 109],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418477', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 6, 9],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418477', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 12, 15],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418477', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 18, 21],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418477', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 24, 25],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764098', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 92, 93],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '763131', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 25, 27],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '763131', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 30, 32],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [1, 109, 110],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418575', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [2, 12, 13],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764486', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [2, 18, 19],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '414837', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [2, 62, 63],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418652', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [2, 66, 67],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764486', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 24, 25],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418006', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 26, 27],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764374', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 32, 33],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762904', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 54, 55],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418433', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 60, 61],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764104', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 68, 69],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762917', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 73, 74],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764098', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 74, 75],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764098', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 90, 92],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '417194', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 98, 99],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 102, 105],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 102, 105],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '417830', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [3, 115, 116],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418006', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 27, 28],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418483', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 16, 17],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762904', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 58, 59],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '418433', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 64, 65],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764098', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 93, 94],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764087', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 69, 70],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '417174', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 99, 100],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 105, 106],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '417830', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 106, 107],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '416621', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [4, 135, 136],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '763623', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [5, 30, 31],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '764374', color: '#7b9ce1' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [5, 48, 49],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })
        typeItem = { name: '762485', color: '' }
        typeItem.color = this.calculateOrderColor(typeItem.name)
        data.push({
          name: typeItem.name,
          value: [5, 108, 109],
          itemStyle: {
            normal: {
              color: typeItem.color,
            },
          },
        })

        function renderItem(params, api) {
          let categoryIndex = api.value(0)
          let start = api.coord([api.value(1), categoryIndex])
          let end = api.coord([api.value(2), categoryIndex])
          let height = api.size([0, 1])[1] * 0.6

          let rectShape = echarts.graphic.clipRectByRect(
            {
              x: start[0],
              y: start[1] - height / 4,
              width: end[0] - start[0],
              height: height / 2,
            },
            {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height * 2,
            }
          )

          return (
            rectShape && {
              type: 'rect',
              shape: rectShape,
              style: api.style(),
            }
          )
        }
        let myChart = echarts.init(document.getElementById('gantt'))
        let option = {
          tooltip: {
            formatter: function (params) {
              return (
                '订单' +
                params.name +
                ' : ' +
                params.value[1] +
                '-' +
                params.value[2]
              )
            },
          },
          title: {
            //text: 'Profile',
            left: 'center',
          },
          dataZoom: [
            {
              type: 'slider',
              filterMode: 'weakFilter',
              showDataShadow: false,
              top: 400,
              height: 10,
              borderColor: 'transparent',
              backgroundColor: '#e2e2e2',
              handleIcon:
                'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
              handleSize: 20,
              handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: '#aaa',
              },
              labelFormatter: '',
            },
            {
              type: 'inside',
              filterMode: 'weakFilter',
            },
          ],
          grid: {
            height: 300,
          },
          xAxis: {
            // position: 'top',
            // min: startTime,
            // scale: true,
            // axisLabel: {
            //   formatter: function (val) {
            //     //return Math.max(0, val - startTime) + ' ms'
            //     return Math.max(0, (val - startTime) / 50) + 'hour'
            //   },
            // },
            // axisLine: {
            //   onZero: false,
            // },
          },
          yAxis: {
            data: resources,
            inverse: true,
          },
          series: [
            {
              type: 'custom',
              renderItem: renderItem,
              itemStyle: {
                opacity: 0.8,
              },
              encode: {
                x: [1, 2],
                y: 0,
              },
              data: data,
              // bar: {
              //   label: {
              //     show: true,
              //   },
              // }, 这个显示名字的好像没用，可能因为是custom type
            },
          ],
        }
        myChart.setOption(option)
        myChart.resize()
      },
      getCookie() {
        this.timePicker = getCookie('cur_date')
      },
      async fetchData() {
        this.listLoading = true
        // this.orderList = await getAllOrders(getCookie('cur_date'))
        // this.newOrderList = await getNewOrders(getCookie('cur_date'))
        this.total = this.schedulerList.length
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      getOrderList() {
        let res = getAllOrders() //todo date
        this.schedulerList = []
        for (let i = 0; i < res.length; i++) {
          let item = res[i]
          this.schedulerList.push(item)
          switch (item.status) {
            case 0:
              item.status = '未开始'
              break
            case 1:
              item.status = '正在作业'
              break
            case 2:
              item.status = '已延期'
              break
            default:
              item.status = '未开始'
          }
        }
      },

      calculateOrderColor(orderId) {
        let orderNumber = parseInt(orderId)
        let r = Math.floor(orderNumber / 10000)
        let g = Math.floor((orderNumber - r * 10000) / 100)
        let b = Math.floor(orderNumber - r * 10000 - g * 100)
        let color =
          '#' +
          (r + 100).toString(16) +
          (g + 100).toString(16) +
          (b + 100).toString(16)
        return color
      },
    },
  }
</script>

<style lang="scss" scoped>
  @mixin fix-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: $base-z-index - 2;
    width: 100%;
    overflow: hidden;
  }

  .vue-admin-beautiful-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    .layout-container-horizontal {
      position: relative;

      &.fixed {
        padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
      }

      &.fixed.no-tabs-bar {
        padding-top: $base-top-bar-height;
      }

      ::v-deep {
        .vab-main {
          width: 88%;
          margin: auto;
        }

        .fixed-header {
          @include fix-header;
        }

        .tag-view-show {
          background: $base-color-white;
          box-shadow: $base-box-shadow;
        }

        .nav-bar-container {
          .fold-unfold {
            display: none;
          }
        }

        .main-padding {
          .app-main-container {
            margin-top: $base-padding;
            margin-bottom: $base-padding;
            background: $base-color-white;
          }
        }
      }
    }

    .layout-container-vertical {
      position: relative;

      .mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: $base-z-index - 1;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #000;
        opacity: 0.5;
      }

      &.fixed {
        padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
      }

      &.fixed.no-tabs-bar {
        padding-top: $base-nav-bar-height;
      }

      .vab-main {
        position: relative;
        min-height: 100%;
        margin-left: $base-left-menu-width;
        background: #f6f8f9;
        transition: $base-transition;

        ::v-deep {
          .fixed-header {
            @include fix-header;

            left: $base-left-menu-width;
            width: $base-right-content-width;
            box-shadow: $base-box-shadow;
            transition: $base-transition;
          }

          .nav-bar-container {
            position: relative;
            box-sizing: border-box;
          }

          .tabs-bar-container {
            box-sizing: border-box;
          }

          .app-main-container {
            width: calc(100% - #{$base-padding} - #{$base-padding});
            margin: $base-padding auto;
            background: $base-color-white;
            border-radius: $base-border-radius;
          }
        }

        &.is-collapse-main {
          margin-left: $base-left-menu-width-min;

          ::v-deep {
            .fixed-header {
              left: $base-left-menu-width-min;
              width: calc(100% - 65px);
            }
          }
        }
      }
    }

    /* 手机端开始 */
    &.mobile {
      ::v-deep {
        .el-pager,
        .el-pagination__jump {
          display: none;
        }

        .layout-container-vertical {
          .el-scrollbar.side-bar-container.is-collapse {
            width: 0;
          }

          .vab-main {
            width: 100%;
            margin-left: 0;
          }
        }

        .vab-main {
          .fixed-header {
            left: 0 !important;
            width: 100% !important;
          }
        }
      }
    }

    /* 手机端结束 */
  }
</style>
